<template>
  <div class="multi_exec">
    <div>
      <h3>执行主机：</h3>
      <div>
        <a-tag closable @close="log(info_index)" v-for="(info,info_index) in show_host_info" :key="info.id">
          {{`${info.hostname}(${info.ip_addr}:${info.port})`}}
        </a-tag>
      </div>
    </div>

    <div style="margin-top: 10px;">
      <a-button @click="showModal" icon="plus">
        从主机列表中选择
      </a-button>
      <a-modal v-model="visible" title="选择执行主机" @ok="handleOk" width="960px">
        <div>
          <a-row>
            <a-col :span="8">
              <a-form-item
                label="主机类别："
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                <a-select style="width: 160px;"
                          placeholder="请选择"
                          v-model="host_form.form.category"
                >

                  <a-select-option :value="value.id" v-for="(value, index) in categorys" :key="value.id">
                    {{value.name}}
                  </a-select-option>


                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="主机别名："
              >
                <a-input
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="已选："
              >
                <span style="margin-left: 8px">
                  <template v-if="hasSelected">
                    {{ `${selectedRowKeys.length}` }}
                  </template>
                </span>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <!--              <router-link>-->
              <a-button type="primary" icon="sync" style="margin-top: 3px;">
                刷新
              </a-button>
              <!--              </router-link>-->
            </a-col>
          </a-row>

        </div>
        <div>
          <a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="record => record.id"
                   :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">


          </a-table>
        </div>


      </a-modal>
    </div>
    <div class="cmd">
      <dev>
        执行指令：
      </dev>
      <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="600" height="200"></editor>
    </div>
    <div>
      <a-button type="primary" icon="thunderbolt" @click="exec_cmd">
        开始执行
      </a-button>
    </div>

  </div>

</template>



<script>

  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 14},
  };
  const columns = [
    {
      // title: '操作',
      // key: 'action',
      // width: 10,
      slots: {title: 'customTitle'},

      scopedSlots: {customRender: 'action'},
    },

    // {
    //   title: 'id',
    //   dataIndex: 'id',
    //   key: 'id',
    //
    //
    // },
    {
      title: '类别',
      dataIndex: 'category_name',
      key: 'category_name',


    },
    {
      title: '主机名称',
      dataIndex: 'hostname',
      key: 'hostname',
      // sorter: true,

    },
    {
      title: '连接地址',
      dataIndex: 'ip_addr',
      key: 'ip_addr',
      // ellipsis: true,
      // sorter: true,
      width: 200,
    },
    {
      title: '端口',
      dataIndex: 'port',
      key: 'port',
      // ellipsis: true,
    },
    {
      title: '备注信息',
      dataIndex: 'desc',
      key: 'desc',
      // ellipsis: true,
    },


  ];
  // const data = [
  //   {
  //     id: '1',
  //     category_name: 'John1',
  //     hostname: 32,
  //     ip_addr: 'New York N.',
  //     port: '22',
  //     desc: 'xxx',
  //     // tags: ['nice', 'developer'],
  //   },
  //   {
  //     id: '2',
  //     category_name: 'John2',
  //     hostname: 32,
  //     ip_addr: 'New York N.',
  //     port: '22',
  //     desc: 'xxx',
  //     // tags: ['nice', 'developer'],
  //   },
  //   {
  //     id: '3',
  //     category_name: 'John3',
  //     hostname: 32,
  //     ip_addr: 'New York N.',
  //     port: '22',
  //     desc: 'xxx',
  //     // tags: ['nice', 'developer'],
  //   },
  //
  //
  // ];

  export default {
    name: "MultiExec",
    data(){
      return {
        selectedRowKeys: [], // Check here to configure the default column
				formItemLayout,
        columns,
        data: [],
        visible: false,
        host_form: {
          form: {
            category: 1,
          }
        },
        categorys: [
          {id: 0, name: ''}, // 默认没有选中任何值

        ],
        show_host_info: [], // 显示选中的所有主机内容
        selected_host_ids: [], // 选中的主机id列表
        content:'',//用户输入的指令
      }
    },
    //获取主机分类数据和列表数据
    created() {
      this.get_host_category_list();
      this.get_host_list();
    },
		computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0;

      },
    },
    components: {
      editor: require('vue2-ace-editor'),
    },
    methods:{
      exec_cmd(){ //发送执行的指令到后台
        this.$axios.post(`${this.$settings.HOST}/mtask/cmd_exec/`,{
          ids:this.selected_host_ids,
          cmd:this.content,
        }).then((res)=>{
          console.log(res)
        })

      },
      editorInit: function () {
            require('brace/ext/language_tools') //language extension prerequsite...
            require('brace/mode/html')
            require('brace/mode/javascript')    //language
            require('brace/mode/less')
            require('brace/theme/chrome')
            require('brace/snippets/javascript') //snippet
        },
      log(index){
        console.log('>>>>>>',index)
      },
      handleOk(e) {
        // console.log(e);

        // console.log(this.data,this.selectedRowKeys)
        this.data.forEach((v, k) => {
          if (this.selectedRowKeys.includes(v.id)) { // 判断某元素是否在数组中用includes比较合适，不能用in

            this.show_host_info.push({
              id: v.id,
              hostname: v.hostname,
              ip_addr: v.ip_addr,
              port: v.port,
            })
            this.selected_host_ids.push(v.id);
          }
        })
        // console.log('>>>>>',this.show_host_info)

        this.visible = false;

      },

      // 选中主机时触发的，selectedRowKeys被选中的主机id列表
      onSelectChange(selectedRowKeys) {
        // [6, 7, 8, 9]
        // console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;

      },

      // 获取主机信息
      get_host_list(url = null) {
        if (url) {
          this.$axios.get(url)
            .then((res) => {
              this.data = res.data;
            })
        } else {
          this.$axios.get(`${this.$settings.HOST}/mtask/host/list/`)
            .then((res) => {
              this.data = res.data;
            })
        }


      },
      // 获取主机分类数据
      get_host_category_list() {
        let token = this.$settings.check_login(this);
        this.$axios.get(`${this.$settings.HOST}/host/categorys/`,{
        headers: {
          'Authorization': `jwt ${token}`
        },
        })
          .then((res) => {
            // console.log(res.data);
            // this.categorys = res.data;
            this.categorys = this.categorys.concat(res.data);
          })

      },
      showModal(){
        this.visible = true
      }
    }


  }
</script>



